<html>
<title>Jquery로 리스트 동적 변경 http://suite.tistory.com</title>
<head>
<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body> 
<form method="get">
<table border=1>
  <tr id=MARK1>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id1">
    </td>
    <td>제목1</td>
    <td>내용1</td>  
    <td>
      <input type="button" name="up1" value="up" onclick="moveUpItem('MARK1')">
      <input type="button" name="down1" value="down"  onclick="moveDownItem('MARK1')">
    </td>
  </tr> 
  <tr id=MARK2>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id2">
    </td>
    <td>제목2</td>
    <td>내용2</td>  
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK2')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK2')">
    </td>
  </tr> 
  <tr id=MARK3>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id3">
    </td>
    <td>제목3</td>
    <td>내용3</td>  
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK3')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK3')">
    </td>
  </tr>
  <tr id=MARK4>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id4">
    </td>
    <td>제목4</td>
    <td>내용4</td>  
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK4')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK4')">
    </td>
  </tr>
  <tr id=MARK5>
    <td>
      <input type="checkbox" name="book_chk" value="checked_id5">
    </td>
    <td>제목5</td>
    <td>내용5</td>  
    <td>
      <input type="button" name="up2" value="up"  onclick="moveUpItem('MARK5')">
      <input type="button" name="down2" value="down"  onclick="moveDownItem('MARK5')">
    </td>
  </tr>    
</table> 
<script type="text/javascript"> 
        
function moveUpItem(currentMark) {     
 
  var idStr='#' + currentMark;
  var prevHtml=$(idStr).prev().html();
  if( prevHtml == null){
    alert("최상위 리스트입니다!");
    return;
  }
  var prevcurrentMark=$(idStr).prev().attr("id");
 
  var currcurrentMark=$(idStr).attr("id");
  var currHtml=$(idStr).html();
  
  //값 변경 
  $(idStr).html(prevHtml);
  $(idStr).prev().html(currHtml);
  
  //id 값도 변경
  $(idStr).prev().attr("id","TEMP_TR");
  $(idStr).attr("id",prevcurrentMark);
  $("#TEMP_TR").attr("id",currcurrentMark);
  
}
function moveDownItem(currentMark) {     
 
  var idStr='#' + currentMark;
  var nextHtml=$(idStr).next().html();
  if( nextHtml == null){
    alert("최하위 리스트입니다!");
    return;
  }
  var nextcurrentMark=$(idStr).next().attr("id");
  var currcurrentMark=$(idStr).attr("id");
  var currHtml=$(idStr).html();
  $(idStr).next().html(currHtml);
 // $(idStr).next().attr("id",currcurrentMark);
  
  //값 변경 
  $(idStr).html(nextHtml);
  
  //id 값도 변경
  $(idStr).next().attr("id","TEMP_TR");
  $(idStr).attr("id",nextcurrentMark);
  $("#TEMP_TR").attr("id",currcurrentMark);
  
}
</script>
<input type=submit name="test">   
</form>
</table>
</body>
</html>  